<div>
  <form nz-form>
    <nz-form-item>
      <nz-form-control [nzSm]="24" [nzXs]="24">
        <nz-alert nzType="error" [nzMessage]="message" nzDescription="{{'alert.truncate'|translate}}">
          <ng-template #message>
            <nz-tag [nzColor]="'#f50'">{{'common.no_rollback'|translate}}</nz-tag>
          </ng-template>
        </nz-alert>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.database'|translate}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-tag [nzColor]="'#2db7f5'">{{database}}</nz-tag>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.table'|translate}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-tag [nzColor]="'#2db7f5'">{{value}}</nz-tag>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24">{{'common.partition'|translate}}</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <div nz-row [nzGutter]="16">
          <div nz-col [nzSpan]="6">
            <nz-select [(ngModel)]="allowValue.logic" name="logic" (ngModelChange)="handlerValidate()">
              <nz-option *ngFor="let item of keys(logic)" nzValue="{{logic[item]}}"
                         nzLabel="{{logic[item]}}">
              </nz-option>
            </nz-select>
          </div>
          <div nz-col [nzSpan]="12">
            <nz-select [(ngModel)]="allowValue.partition" name="partition"
                       (ngModelChange)="handlerValidate()" [nzDisabled]="!allowValue.logic">
              <nz-option *ngFor="let item of partitions" nzValue="{{item.partition}}"
                         nzLabel="{{item.partition}}">
              </nz-option>
            </nz-select>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="allowPartitions?.columns.length > 0">
      <nz-form-control [nzSm]="24" [nzXs]="24">
        <nz-table #basicTable [nzData]="allowPartitions?.columns" nzSize="small" nzTableLayout="fixed">
          <thead>
          <tr>
            <th *ngFor="let header of allowPartitions?.headers" nzEllipsis>
              <div nz-popover nzPopoverTrigger="click" nzPopoverContent="{{header?.name}}">
                {{header?.name}}
              </div>
            </th>
            <th nzEllipsis>{{'common.action' | translate}}</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let column of basicTable.data">
            <td *ngFor="let header of allowPartitions?.headers" nzEllipsis>
              <div nz-popover nzPopoverTrigger="click" nzPopoverTitle="{{header.name}}"
                   nzPopoverContent="{{column[header.name]}}">
                {{column[header.name]}}
              </div>
            </td>
            <td>
              <button nz-button nzShape="circle" nzSize="small" nzDanger nz-tooltip
                      nzTooltipTitle="{{'common.delete'|translate}} {{column.partition}}"
                      nzTooltipPlacement="bottom"
                      nz-popconfirm
                      [disabled]="deletePartition"
                      nzPopconfirmTitle="Are you sure?"
                      nzOkText="{{'common.ok' | translate}}"
                      nzCancelText="{{'common.cancel' | translate}}"
                      (nzOnConfirm)="handlerClean(column.id)">
                <i class="fa fa-trash-o"></i>
              </button>
            </td>
          </tr>
          </tbody>
        </nz-table>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
